<template>
  <div ref="editorRef" id="editor"/>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue';
import WangEditor from 'wangeditor';
import {showFailToast, showSuccessToast} from "vant";
import {getUserToken} from "@/utils/userIsLogin";
import {uploadImage} from "@/api/upload";

const props = defineProps({
  content: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['update:content']);
const editorRef = ref(null); // 编辑器实例的引用
// 转base64
const filesToBase64 = (files,editor) => {
  files.forEach(item => {
    const reader = new FileReader();
    reader.onload = function(e) {
      uploadImg(e.target.result, item,editor);
    };
    reader.readAsDataURL(item);
  });
};

// base64转blob
const Base64toBlob = ({ base64, success }) => {
  const arr = base64.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  const blob = new Blob([u8arr], { type: mime });
  success(blob);
};
// 上传图片
const uploadImg = (base64, file,editor) => {
  const formData = new FormData();
  Base64toBlob({
    base64,
    success(blob) {
      formData.append('file', blob, file.name);
      uploadImage(formData).then(res => {
        console.log(res, 'res')
        if (res.msg === '请求成功') {
          showSuccessToast('上传成功');
          editor.cmd.do('insertHTML', `<img src="${res.data.uploadUrl}" style="max-width:100%;"/>`);
        } else {
          showFailToast(res.msg);
        }
      });
    }
  });
};
// editor初始化
const editorInit=()=>{
  const editor = new WangEditor(editorRef.value);
  // const editor = new WangEditor("#editor");
  // 配置菜单项
  editor.config.menus = [
    'head', // 标题
    'bold', // 粗体
    'fontSize', // 字号
    'fontName', // 字体
    'italic', // 斜体
    'underline', // 下划线
    'strikeThrough', // 删除线
    'foreColor', // 文字颜色
    'backColor', // 背景颜色
    'link', // 插入链接
    'list', // 列表
    'justify', // 对齐方式
    'quote', // 引用
    'emoticon', // 表情
    'image', // 插入图片
    'table', // 表格
    'code', // 插入代码
    'undo', // 撤销
    // 其他菜单项
    'redo', // 重复
    'fullscreen', // 全屏
  ];
  editor.config.customUploadImg = function(resultFiles, insertImgFn) {
    // resultFiles 是 input 中选中的文件列表
    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
    filesToBase64(resultFiles,editor);
  }
  // 监听 props 中的内容变化，将变化的内容设置为编辑器的内容
  watch(() => props.content, (val) => {
    if (val && val !== editor.txt.html()) {
      editor.txt.html(val);
    }
  });

  // 监听编辑器内容的变化，将变化的内容通过 emit 事件传递出去
  editor.config.onchange = function () {
    const html = editor.txt.html();
    emit('update:content', html);
  };

  // 创建编辑器实例
  editor.create();
  editorRef.value = editor.$toolbarElem.parent().get(0); // 将编辑器容器设置为 ref
};
onMounted(() => {
  editorInit();
});
</script>

<style>
/* 编辑器样式 */
.w-e-toolbar {
  z-index: 999 !important;
  border-radius: 12px 12px 0 0;
  border: 2px solid #4fc3f7 !important;
}

.w-e-text-container {
  z-index: 999 !important;
  border-radius: 0 0 12px 12px;
  border: 2px solid #4fc3f7 !important;
  border-top: none !important;
}

.w-e-menu-container {
  background-color: #f2f2f2 !important;
  border: none !important;
  box-shadow: none !important;
}

.w-e-menu-container:after {
  border-color: #f2f2f2 !important;
}

.w-e-text {
  height: 300px !important;
}

.w-e-toolbar .w-e-menu-container .w-e-menu .w-e-icon-image:before {
  content: "\E6F7" !important; /* 替换图片按钮的图标 */
  font-family: "iconfont" !important; /* 设置字体图标 */
  font-size: 18px !important; /* 设置图标大小 */
}

</style>
